<!-- templates/photo.html -->
{% extends "base.html" %}

{% block title %}{{ photo.title }} - 校园摄影投票系统{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-md-8">
            <div class="card mb-4">
                <img src="{{ url_for('static', filename='uploads/' + photo.filename) }}" 
                     class="card-img-top" alt="{{ photo.title }}">
                <div class="card-body">
                    <h2 class="card-title">{{ photo.title }}</h2>
                    <p class="card-text">{{ photo.description }}</p>
                    <p class="text-muted">
                        分类: {{ photo.category }} | 
                        上传时间: {{ photo.created_at.strftime('%Y-%m-%d %H:%M') }}
                    </p>
                    
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <span class="badge bg-primary rounded-pill">{{ photo.vote_count }} 票</span>
                        </div>
                        
                        {% if current_user.is_authenticated and not current_user.is_admin %}
                            <div class="d-flex gap-2">
                                {% if not already_voted %}
                                <form method="POST" action="{{ url_for('main.vote', photo_id=photo.id) }}">
                                    <button type="submit" class="btn btn-success btn-sm">投票</button>
                                </form>
                                {% else %}
                                <button class="btn btn-secondary btn-sm" disabled>已投票</button>
                                {% endif %}
                                
                                <!-- 收藏按钮 -->
                                <form method="POST" action="{{ url_for('main.favorite', photo_id=photo.id) }}">
                                    <button type="submit" class="btn btn-outline-primary btn-sm">
                                        {% if current_user.is_favorite(photo) %}
                                            已收藏
                                        {% else %}
                                            收藏
                                        {% endif %}
                                    </button>
                                </form>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
            
            <!-- 评论区域 -->
            <div class="card">
                <div class="card-header">
                    <h5>评论 ({{ photo.photo_comments.count() }})</h5>
                </div>
                <div class="card-body">
                    <!-- 显示所有评论 -->
                    {% for comment in comments %}
                        <div class="mb-3">
                            <div class="d-flex justify-content-between">
                                <strong>{{ comment.user.username }}</strong>
                                <small class="text-muted">{{ comment.created_at.strftime('%Y-%m-%d %H:%M') }}</small>
                            </div>
                            <p class="mb-0">{{ comment.content }}</p>
                        </div>
                    {% endfor %}
                    
                    <!-- 添加新评论表单 -->
                    {% if current_user.is_authenticated %}
                    <form method="POST" action="{{ url_for('main.add_comment', photo_id=photo.id) }}">
                        {{ form.hidden_tag() }}
                        <div class="mb-3">
                            {{ form.content.label(class="form-label") }}
                            {{ form.content(class="form-control", rows=3) }}
                            {% for error in form.content.errors %}
                                <div class="invalid-feedback d-block">{{ error }}</div>
                            {% endfor %}
                        </div>
                        <button type="submit" class="btn btn-primary">发表评论</button>
                    </form>
                    {% else %}
                    <p class="text-muted">请先登录才能发表评论。</p>
                    {% endif %}
                </div>
            </div>
        </div>
        
        <!-- 右侧栏 -->
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5>作者信息</h5>
                </div>
                <div class="card-body">
                    <div class="text-center">
                        {% if photo.author.avatar %}
                            <img src="{{ url_for('static', filename='uploads/' + photo.author.avatar) }}" 
                                 class="rounded-circle mb-3" width="100" alt="头像">
                        {% else %}
                            <img src="{{ url_for('static', filename='images/default-avatar.png') }}" 
                                 class="rounded-circle mb-3" width="100" alt="头像">
                        {% endif %}
                        <h6>{{ photo.author.username }}</h6>
                        <p class="text-muted">{{ photo.author.bio or '暂无简介' }}</p>
                    </div>
                </div>
            </div>
            
            <!-- 其他作品 -->
            <div class="card mt-3">
                <div class="card-header">
                    <h5>其他作品</h5>
                </div>
                <div class="card-body">
                    {% for other_photo in other_photos %}
                        <a href="{{ url_for('main.photo_detail', photo_id=other_photo.id) }}" class="d-block mb-2">
                            <div class="d-flex align-items-center">
                                <img src="{{ url_for('static', filename='uploads/' + other_photo.thumbnail) }}" 
                                     class="me-2" width="50" height="50" alt="{{ other_photo.title }}">
                                <span>{{ other_photo.title }}</span>
                            </div>
                        </a>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}